<template>
  <div id="order" class="main-box">
    <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 16px" @click="goAdd">
      {{ $t('添加') }}
    </el-button>
    <BaseTable :request="request" :params.sync="params" ref="baseTable" :is-request="false">
      <el-table-column :label="$t('序号')" type="index" width="80px" />
      <el-table-column :label="$t('邮箱')" prop="email" />
      <el-table-column :label="$t('状态')" prop="status">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" :active-text="$t('正常')"
            :inactive-text="$t('禁用')" active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.2)"
            @change="disableUser(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" width="100px" fixed="right" align="right">
        <template slot-scope="scope">
          <EditBtn @click="editor(scope.row)" />
          <DelBtn @success="del(scope.row)" :confirm-content="$t('删除该收件信息')" />
        </template>
      </el-table-column>
    </BaseTable>
    <BaseDialog :title="addForm.id ? $t('编辑') : $t('添加')" :dialog-show.sync="dialogShow" width="50%" footer
      @submit="submit">
      <el-form ref="addForm" :model="addForm" :rules="rules" class="addForm" label-position="top">
        <el-form-item :label="$t('邮箱')" prop="email">
          <el-input v-model="addForm.email" />
        </el-form-item>
        <!-- <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" type="password" />
        </el-form-item> -->
        <el-form-item :label="$t('选择站点')" prop="website_id">
          <el-select v-model="addForm.website_id" multiple :placeholder="$t('请选择站点')">
            <el-option v-for="item in options" :key="item.id" :label="item.domain" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('状态')">
          <el-select v-model="addForm.status">
            <el-option :label="$t('正常')" :value="1" />
            <el-option :label="$t('禁用')" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>
<script>
import inquiryApi from '@/api/inquiry.js'
import websiteApi from '@/api/website.js'
export default {
  data() {
    return {
      request: inquiryApi.emailList,
      params: { website_id: '' },
      orderData: [], //
      dialogShow: false,
      options: [], // 站点下拉选项
      addForm: {
        website_id: '',
        email: ''
      },
      rules: {
        email: [
          { required: 'true', message: this.$t('请输入邮箱'), trigger: 'blur' }
        ],
        website_id: [
          {
            required: 'true',
            message: this.$t('请选择站点'),
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    siteId() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId: {
      handler(val, value) {
        if (val) {
          this.params.website_id = val
          this.$nextTick(() => {
            this.getList()
          })
        }
      },
      immediate: true
    }
  },
  created() {
    this.getWebsiteList()
  },

  methods: {
    disableUser(row) {
      const val = {
        id: row.id,
        email: row.email,
        website_id: row.website_id,
        status: row.status
      }
      inquiryApi.emailUpdate(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },
    // 获取站点列表
    getWebsiteList() {
      websiteApi.websiteList().then(res => {
        this.options = res.data
      })
    },

    // 新增
    goAdd() {
      this.addForm = {
        email: '',
        website_id: [this.siteId],
        id: '',
        status: 1
      }
      this.dialogShow = true
    },
    // 编辑
    editor(val) {
      const row = this.$lodash.cloneDeep(val)
      this.addForm = {
        email: row.email,
        website_id: row.website_id,
        id: row.id,
        status: row.status
      }
      this.dialogShow = true
    },
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            inquiryApi.emailSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList('search')
              }
            })
          } else {
            inquiryApi.emailUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },

    // 删除
    del(row) {
      inquiryApi.emailDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList('search')
        }
      })
    },
    // 邮箱列表
    getList(type) {
      this.$refs.baseTable.getList(type)
    }
  }
}
</script>

<style scoped lang="scss">
.addForm {
  .el-select {
    width: 100%;
  }
}

.el-table {
  margin-bottom: 20px;
}
</style>
